<!–markdown–>前言一
好像很久很久没有写博客了…
前言二
今天七夕,老板不让加班…
前言三
最近在工作中使用到了rem,随之引发了一个奇怪的bug…
关于rem
w3c对rem只有简短的一句概述:root em, a unit equal to the em size for the document root (usually html)。 使用根元素html的字体大小。它的出现,可以让我们更加快乐简单的去完成自适应布局顺带连字体大小都一起自适应了。
<p><!–more–></p>
bug表现
在ie11(还有微软新的旗鱼浏览器)下,部分使用了rem单位的元素仅能在预设的fontsize下工作,之后不管如何再更改html的大小,都不再起作用。最后花了半天的时间定位到原因为,失效的父容器中设置了font-size:0;
<p data-height="268" data-theme-id="0" data-slug-hash="ZGdKXP" data-default-tab="result" data-user="hijimo" class='codepen'>See the Pen <a href='http://codepen.io/hijimo/pen/ZGdKXP/'>ZGdKXP</a> by jimo (<a href='http://codepen.io/hijimo'>@hijimo</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
–bug呈现原因与解决方案
最终解决方案,在父容器中取消了font-size:0的css样式。关于bug出现的原因,鉴于其他浏览器都能正常工作,结合国内外友人碰到的ie11下的fontsize 与 em rem 的bug来看。暂定于这是ie11的bug!(此结论仅由目前我所拥有的知识与信息所得出,随时拥有变更的可能性,且不具有任何借鉴意义!)